<template>
  <div>
    <Card ref="card" v-if="false">
      <p slot="title">地区评估报告</p>
      <a href="#" slot="extra" @click.prevent="refData">刷新</a>
      <Row :gutter="16" >
        <Col span="6">
          <Input v-model="str" size="large" placeholder="请输入项目名称"/>
        </Col>

        <Col span="4">
          <Button @click="SearchAll" size="large" type="primary" icon="ios-search">查询</Button>
        </Col>
      </Row>
    </Card>

    <Row class="margin-top-10" :gutter="8">
      <Col span="4">
        <Menu theme="light" width="auto">          
            <MenuItem
             v-for="(item, index) in yearList"
              :key="`menu_item_${index}`"
              :name="(item.Year)"
              @click.native="SearchByYear(item)"
            > <Icon type="ios-folder" />{{item.Year}}</MenuItem>
         
        </Menu>
      </Col>
      <Col span="20">
        <Row>
          <Table border :columns="tableTitle" :data="tableData" ref="table"  :height="tableHeight"></Table>
        </Row>
         <Row class="margin-top-10">
      <Page
        :total="total"
        :current="pPage"
        :page-size="pSize"
        :page-size-opts="[50,100,300,500,1000,2000,5000]"
        @on-change="s=>{pPage=s;Search();}"
        @on-page-size-change="p=>{pSize=p;pPage=1;Search()}"
        show-total
        show-sizer
      />
    </Row>
      </Col>
    </Row>
    
  </div>
</template>
<script>
import dayjs from "dayjs";
import { Message, Modal } from "view-design";
import { SearchAreaPersonGroup,GetAreaYear } from "@/api/data";
export default {
  name: "area_saved",
  data() {
    return {
       yearList: [],
       year: '',
      total: 0,
      pPage: 1,
      pSize: 50,
      tableHeight:450,
      str:'',
      tableTitle: [
        {
          title: "序号",
          type: "index",
          align: "center",
          width: 80
        },
        {
          title: "项目名称",
          key: "GroupName",
          render: (h, params) => {
            return h("a", {
              props: {
                href: "#"
              },
               style: {
                  fontSize: "18px"
                },
              on: {
                click: () => {
                 this.turntodetail(params.row)
                }
              }
            },params.row.GroupName);
          }
        },
        {
          title: "实施日期",
          key: "sys_CreateDate",
          align: "center",
          render: (h, params) => {
            return h(
              "div",
              dayjs(params.row.sys_CreateDate).format("YYYY年MM月DD日")
            );
          }
        },
        
      ],
      tableData: [],
    };
  },

  methods: {
     refData() {
      this.GetAreaYear();
      this.SearchAll();
    },
    GetAreaYear() {
      let vm = this;
      GetAreaYear().then(res => {
        const data = res.data;
        if (data.Type == 1) {
          vm.yearList = data.Data;
        } else {
          vm.$Message.error(data.Message);
        }
      });
    },
    SearchByYear(item) {
     this.year=item.Year;
      this.Search();
    },
   
    SearchAll(item) {     
      this.year='';
      this.Search();
    },
    Search() {
      let vm = this;
       var reqData = {
        str: vm.str,
        year:vm.year,
        issaved:1,   
        page: vm.pPage,
        size: vm.pSize,   
      };
      SearchAreaPersonGroup(reqData).then(res => {
        const data = res.data;
        if (data.Type == 1) {
           vm.total = data.Data.Total;
          vm.tableData = data.Data.Rows;
        } else {
          vm.$Message.error(data.Message);
        }
      });
    },
    turntodetail(item) {    
        this.$router.push({
          name: "search_area_savedperson",
          params: { id: item.Gid },
          query: { groupname: item.GroupName }
        });      
    }
  },
  created() {},
  mounted() {  
    this.tableHeight =
      window.innerHeight -200;
      this.GetAreaYear();
    this.Search();
  }
};
</script>
